﻿<div class="hero-unit">
    <h1>Reserva tu pista por internet!!</h1>
    <p class="lead">Selecciona los datos acerca de la pista en la que quieres realizar la actividad, y reservala electrónicamente</p>
</div>

<div class="marketing">
    <div class="row-fluid">
        <div class="span12">
            <form class="form-horizontal">

                <!-- bloque con 2 layouts -->
                <div class="row-fluid">

                    <!-- layout izquierda -->
                    <div class="span4">

                        <br />
                        <br />

                        <div class="page-header">
                            <h3>Consulta tu pista favorita
                            <small>...</small>
                            </h3>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="selectCentro">Centro</label>
                            <div class="controls">
                                <select id="selectCentro">
                                    <option value="-1" selected/>
                                </select>
                                <p class="help-block"><small>Seleccione un centro del listado</small></p>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="selectDeporte">Deporte</label>
                            <div class="controls">
                                <select id="selectDeporte">
                                    <option value="-1" selected/>
                                </select>
                                <p class="help-block"><small>Seleccione un deporte del listado</small></p>
                            </div>
                        </div>

                        <div class="control-group">                      
                            <label class="control-label" for="selectPista">Pista</label>
                            <div class="controls">
                                <select id="selectPista">
                                    <option value="-1" selected/>
                                </select>
                                <p class="help-block"><small>Seleccione una pista del listado</small></p>
                            </div>
                        </div>

                        <div class="offset1">
                            <button type="submit" class="btn-large btn-primary">Ver Pista</button>
                        </div> 
                    </div>
                    <!-- fin layout izquierda -->

                    <!-- layout derecha -->
                    <div class="span8">
                        <div class="row-fluid offset1">
                            <div id="calendar" class="span12"></div>
                        </div>
                        
                    </div>
                    <!-- fin layout derecha -->
                </div>
                <!-- fin bloque con 2 layouts -->

                <hr class="soften"/>
                
            </form>
        </div>
    </div>
</div>

@section Hidden {
    <div class="modal hide fade" id="reservaModal">
        <form id="formReserva" name="formReserva">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">x</button>
                <h3>Realizar reserva</h3>
            </div>
            <div class="modal-body">
                <div class="span6">                    
                </div>           
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-primary" onclick="closeReserva();">Ups! yo no quería...</a>
                <a href="#" class="btn btn-success" onclick="cerrarSesion();">Reservar</a>            
            </div>
        </form>
    </div>  
}

@section Script {   
    <script type='text/javascript' src="@Url.Content("~/assets/script/ReservaHelper.js")"></script>   
    <script type="text/javascript">
     $(document).ready(function(){

          var evnts = function(){
              return {
                      "event":
                          [
                               {"date":"2012-01-25","title":"1"}
                              ,{"date":"2012-02-01","title":"2"}
                              ,{"date":"2012-03-22","title":"34"}
                              ,{"date":"2012-04-03","title":"123"}
                              ,{"date":"2012-05-04","title":"223"}
                              ,{"date":"2012-06-28","title":"4"}
                              ,{"date":"2012-07-28","title":"5"}
                              ,{"date":"2012-08-16","title":"14"}
                              ,{"date":"2012-09-21","title":"10"}
                              ,{"date":"2012-10-21","title":"10"}
                              ,{"date":"2012-11-21","title":"10"}
                              ,{"date":"2012-12-21","title":"10"}
			      ,{"date":"2012-05-03","title":"1500"}
                          ]
                      }
          };

         $('#calendar').Calendar({ 'events': evnts, 'weekStart': 1 })
         .on('changeDay', function(event){ alert(event.day.valueOf()); })
         .on('onEvent', function(event){ alert(event.day.valueOf()); })
         .on('onNext', function(event){ alert("Next"); })
         .on('onPrev', function(event){ alert("Prev"); })
         .on('onCurrent', function(event){ alert("Current"); });
      });
    </script>
}

@*

<div class="page-header">
                            <h3><small>...</small>
                            o realiza una búsqueda de disponibilidad
                            </h3>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="selectDeporte">Deporte</label>
                            <div class="controls">
                                <select id="selectDeporte2">
                                    <option value="-1" selected/>
                                </select>
                                <p class="help-block"><small>Seleccione un deporte del listado</small></p>
                            </div>
                        </div>

                        <div class="control-group">                      
                            <label class="control-label" for="selectPista">Horario</label>
                            <div class="controls">
                                <select id="selectHora">
                                    <option value="-1" selected/>
                                </select>
                                <p class="help-block"><small>Seleccione la hora deseada</small></p>
                            </div>
                        </div>

                        <div class="offset1">
                            <button type="submit" class="btn-large btn-primary">Realizar Búsqueda</button>
                        </div>*@